import { useState, useEffect, useCallback } from 'react';

interface AccessibilityOptions {
  enableHighContrast?: boolean;
  enableReducedMotion?: boolean;
  enableLargeText?: boolean;
}

export const useAccessibility = (options: AccessibilityOptions = {}) => {
  const {
    enableHighContrast = false,
    enableReducedMotion = false,
    enableLargeText = false
  } = options;

  const [highContrast, setHighContrast] = useState(enableHighContrast);
  const [reducedMotion, setReducedMotion] = useState(enableReducedMotion);
  const [largeText, setLargeText] = useState(enableLargeText);
  const [prefersDarkMode, setPrefersDarkMode] = useState(false);

  // 检测用户的系统偏好
  useEffect(() => {
    // 检测高对比度偏好
    const mediaQueryContrast = window.matchMedia('(prefers-contrast: high)');
    setHighContrast(mediaQueryContrast.matches);
    
    const contrastHandler = (e: MediaQueryListEvent) => {
      setHighContrast(e.matches);
    };
    
    mediaQueryContrast.addEventListener('change', contrastHandler);
    
    // 检测减少动画偏好
    const mediaQueryMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
    setReducedMotion(mediaQueryMotion.matches);
    
    const motionHandler = (e: MediaQueryListEvent) => {
      setReducedMotion(e.matches);
    };
    
    mediaQueryMotion.addEventListener('change', motionHandler);
    
    // 检测深色模式偏好
    const mediaQueryDark = window.matchMedia('(prefers-color-scheme: dark)');
    setPrefersDarkMode(mediaQueryDark.matches);
    
    const darkHandler = (e: MediaQueryListEvent) => {
      setPrefersDarkMode(e.matches);
    };
    
    mediaQueryDark.addEventListener('change', darkHandler);
    
    return () => {
      mediaQueryContrast.removeEventListener('change', contrastHandler);
      mediaQueryMotion.removeEventListener('change', motionHandler);
      mediaQueryDark.removeEventListener('change', darkHandler);
    };
  }, []);

  // 切换高对比度模式
  const toggleHighContrast = useCallback(() => {
    setHighContrast(prev => !prev);
  }, []);

  // 切换减少动画模式
  const toggleReducedMotion = useCallback(() => {
    setReducedMotion(prev => !prev);
  }, []);

  // 切换大字体模式
  const toggleLargeText = useCallback(() => {
    setLargeText(prev => !prev);
  }, []);

  // 应用无障碍样式到DOM
  useEffect(() => {
    // 应用高对比度类
    if (highContrast) {
      document.body.classList.add('high-contrast');
    } else {
      document.body.classList.remove('high-contrast');
    }
    
    // 应用减少动画类
    if (reducedMotion) {
      document.body.classList.add('reduced-motion');
    } else {
      document.body.classList.remove('reduced-motion');
    }
    
    // 应用大字体类
    if (largeText) {
      document.body.classList.add('large-text');
    } else {
      document.body.classList.remove('large-text');
    }
  }, [highContrast, reducedMotion, largeText]);

  return {
    highContrast,
    reducedMotion,
    largeText,
    prefersDarkMode,
    toggleHighContrast,
    toggleReducedMotion,
    toggleLargeText,
    accessibilityClasses: `
      ${highContrast ? 'high-contrast' : ''}
      ${reducedMotion ? 'reduced-motion' : ''}
      ${largeText ? 'large-text' : ''}
    `
  };
};